<template>
  <el-drawer
    :title="drawerTitle[drawerType]"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="clearDialog"
    custom-class="tag-drawer kpi-time-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="150px" :rules="editFormRules" ref="editForm">
          <el-row>
            <el-col :span="24">
              <el-form-item label="时间修饰词名称" prop="timeModificationName">
                <el-input placeholder="请输入应用时间修饰词名称" v-model="editForm.timeModificationName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="业务口径" prop="description">
                <el-input
                  type="textarea"
                  placeholder="请输入业务口径"
                  v-model="editForm.description"
                  :rows="5"
                  resize="none"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="时间配置" prop="isWindowMode">
                <el-radio-group v-model="editForm.isWindowMode">
                  <el-radio-button label="0">时延模式</el-radio-button>
                  <el-radio-button label="1">窗口模式</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <template v-if="editForm.isWindowMode == '0'">
            <el-row>
              <el-col :span="24">
                <el-form-item label="" prop="frequencyTime">
                  <el-radio-group v-model="editForm.frequencyTime">
                    <el-radio v-for="item in frucyList" :label="item.value" :key="item.value">{{
                      item.label
                    }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="select-item">
              <el-col :span="24">
                <el-form-item label="" prop="quick">
                  <el-checkbox v-model="editForm.quick" @change="quickChange">快速选择</el-checkbox>
                  <el-button
                    :type="editForm.quickType == 'today' ? 'primary' : ''"
                    :class="{ disabled: !editForm.quick }"
                    @click="editForm.quickType = 'today'"
                    >当前{{ showFruNm() }}</el-button
                  >
                  <el-button
                    :type="editForm.quickType != 'today' ? 'primary' : ''"
                    :class="{ disabled: !editForm.quick }"
                    @click="editForm.quickType = 'yesterday'"
                    >前一{{ showFruNm() }}</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="select-item">
              <el-col :span="24">
                <el-form-item label="" prop="custom">
                  <el-checkbox v-model="editForm.custom" @change="customChange">自定义</el-checkbox>
                  T -
                  <el-input-number
                    v-model="editForm.customNum"
                    :min="0"
                    :max="99999"
                    :step="1"
                    step-strictly
                    :disabled="!editForm.custom"
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-else>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label=""
                  prop="daterange"
                  :rules="editForm.dateWay1 ? { required: true, message: '时间范围不能为空', trigger: 'change' } : []"
                >
                  <el-checkbox v-model="editForm.dateWay1" @change="changeDate1">方式1：</el-checkbox>
                  <el-date-picker
                    v-model="editForm.daterange"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :disabled="!editForm.dateWay1"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label=""
                  prop="startDate"
                  :rules="editForm.dateWay2 ? { required: true, message: '开始时间不能为空', trigger: 'change' } : []"
                >
                  <el-checkbox v-model="editForm.dateWay2" @change="changeDate2">方式2：</el-checkbox>
                  <el-date-picker
                    v-model="editForm.startDate"
                    type="datetime"
                    placeholder="开始时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :disabled="!editForm.dateWay2"
                  ></el-date-picker>
                  - 至今
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="clearDialog">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      drawerType: 'add',
      drawerTitle: {
        add: '新增时间修饰词',
        edit: '修改时间修饰词'
      },
      frucyList: [
        { value: 1, label: '年' },
        { value: 2, label: '月' },
        { value: 3, label: '日' },
        { value: 4, label: '小时' },
        { value: 5, label: '分钟' }
      ],
      editForm: {
        tagId: '',
        timeModificationName: '',
        description: '',
        isWindowMode: '0',
        frequencyTime: '',
        quick: true,
        quickType: 'today',
        custom: false,
        customNum: '',
        dateWay1: true,
        dateWay2: false,
        daterange: '',
        startDate: ''
      },
      editFormRules: {
        timeModificationName: [{ required: true, message: '时间修饰词名称不能为空', trigger: 'blur' }],
        description: [{ required: true, message: '业务口径不能为空', trigger: 'blur' }],
        frequencyTime: [{ required: true, message: '时间配置不能为空', trigger: 'change' }]
      }
    }
  },
  methods: {
    showDrawer(type, data) {
      this.drawerType = type
      if (this.drawerType === 'edit') {
        this.editForm.tagId = data.tagId
        const indexJson = JSON.parse(data.indexJson)
        this.editForm.timeModificationName = indexJson.timeModificationName
        this.editForm.description = indexJson.description
        this.editForm.isWindowMode = indexJson.isWindowMode
        if (this.editForm.isWindowMode == '0') {
          if (indexJson.fastChoice == '0') this.editForm.quickType = 'today'
          else this.editForm.quickType = 'yesterday'
          this.editForm.customNum = indexJson.customNum
          if (this.editForm.customNum) {
            this.editForm.quick = false
            this.editForm.custom = true
          }
        } else {
          if (indexJson.endTime) {
            this.editForm.daterange = [indexJson.startTime, indexJson.endTime]
          } else {
            this.editForm.startDate = indexJson.startTime
            this.editForm.dateWay1 = false
            this.editForm.dateWay2 = true
          }
        }
        this.editForm.frequencyTime = indexJson.frequencyTime
      }
      this.drawerVisible = true
    },
    showFruNm() {
      if (this.editForm.frequencyTime) {
        const target = this.frucyList.find(item => item.value === this.editForm.frequencyTime)
        return target.label
      } else return '年'
    },
    quickChange(val) {
      if (val) this.editForm.custom = false
      else this.editForm.custom = true
    },
    customChange(val) {
      if (val) this.editForm.quick = false
      else this.editForm.quick = true
    },
    changeDate1(val) {
      if (val) this.editForm.dateWay2 = false
      else this.editForm.dateWay2 = true
    },
    changeDate2(val) {
      if (val) this.editForm.dateWay1 = false
      else this.editForm.dateWay1 = true
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          let config = {
            timeModificationName: this.editForm.timeModificationName,
            description: this.editForm.description,
            isWindowMode: this.editForm.isWindowMode,
            startTime: '',
            endTime: '',
            fastChoice: '',
            frequencyTime: '',
            customNum: '',
            isTimeNow: 0
          }
          if (this.editForm.isWindowMode === '0') {
            config.frequencyTime = this.editForm.frequencyTime
            if (this.editForm.quick) {
              if (this.editForm.quickType === 'today') {
                config.fastChoice = '0'
              } else {
                config.fastChoice = '1'
              }
            } else config.customNum = this.editForm.customNum
          } else {
            if (this.editForm.dateWay1) {
              config.startTime = this.editForm.daterange[0]
              config.endTime = this.editForm.daterange[1]
            } else {
              config.startTime = this.editForm.startDate
              config.isTimeNow = 1
            }
          }
          let params = {
            indexType: 1,
            indexJson: JSON.stringify(config)
          }
          if (this.drawerType === 'edit') params.tagId = this.editForm.tagId
          this.$ajax({
            url: this.$ajax.setUrl('IndexAllocation/addIndexConfig'),
            method: 'post',
            data: this.$ajax.setData(params)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.clearDialog()
              this.$emit('refresh')
              this.$message.success(data.msg)
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    clearDialog() {
      this.editForm.tagId = ''
      this.editForm.timeModificationName = ''
      this.editForm.description = ''
      this.editForm.isWindowMode = '0'
      this.editForm.frequencyTime = ''
      this.editForm.quick = true
      this.editForm.quickType = 'today'
      this.editForm.custom = false
      this.editForm.customNum = ''
      this.editForm.dateWay1 = true
      this.editForm.dateWay2 = false
      this.editForm.daterange = ''
      this.editForm.startDate = ''
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
        this.drawerVisible = false
      })
    }
  }
}
</script>

<style lang="scss">
.kpi-time-drawer {
  .select-item {
    .el-checkbox {
      margin-right: 20px;
    }
    .el-input {
      width: 200px !important;
    }
    .el-input-number {
      .el-input-number__decrease,
      .el-input-number__increase {
        display: none;
      }
    }
    .disabled {
      color: #333;
      background-color: #f6f6f6;
      border-color: #f6f6f6;
    }
  }
  .el-date-editor {
    width: 350px !important;
  }
}
</style>
